<template>
	<view class="viewport">
		<view class="u-wrap">
			<view class="wrap-item" v-for="i in 10">
				<image src="../../static/logo.png" mode=""></image>
				<text>这是标题</text>
			</view>
		</view>
		<uni-grid :column="4" :highlight="true" @change="change">
			<uni-grid-item v-for="(item, index) in 4" :index="index" :key="index">
				<view class="grid-item" style="background-color: #fff;">
					<uni-icons type="image" :size="30" color="#777" />
					<text class="text">文本信息</text>
				</view>
			</uni-grid-item>
		</uni-grid>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			change(e) {
				console.log(e.detail)
			}
		}
	}
</script>

<style lang="scss">
	.viewport {
		background-color: #eeeeee;
	}

	.u-wrap {
		padding: 20rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: flex-start;

		.wrap-item {
			&:nth-child(-n+5) {
				margin-bottom: 20rpx;
			}

			width: 20%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			image {
				width: 100rpx;
				height: 100rpx;
			}

			text {
				margin-top: 10rpx;
				font-size: 28rpx;
			}
		}
	}
	.grid-item{
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
</style>